<script setup lang="ts">
import issueService from "../http/IssueService";
import TheCommonTable from "../components/the-common-table.vue"
import issueCategoryService from "../http/IssueCategoryService";
import {IssueCategoryQueryRendered} from "../http/Model";

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id'
  }, {
    title: '标题',
    dataIndex: 'title',
    key: 'title'
  }, {
    title: '分类',
    dataIndex: 'categoryName',
    key: 'category'
  }, {
    title: '作者',
    dataIndex: 'authorName',
    key: 'author'
  }, {
    title: '操作',
    key: 'action'
  }
]

// 加载分类列表
let categoryList: { label: string, value: string }[] = []

const onTableRefresh = () => {
  issueCategoryService.findAll().then(({data}) => {
    if (data.success) {
      categoryList.length = 0
      categoryList.push(...data.data.map((category: IssueCategoryQueryRendered) => ({
        label: category.name!,
        value: category.code!
      })))
    }
  })
}

const editingForm: FormItem[] = [
  {
    label: '标题',
    dataIndex: 'title',
    inputType: 'text',
  }, {
    label: '内容',
    dataIndex: 'content',
    inputType: 'text'
  }, {
    label: '分类',
    dataIndex: 'category.code',
    formIndex: 'categoryId',
    inputType: 'select',
    options: categoryList,
    placeholder: '请选择分类'
  }, {
    label: '作者',
    dataIndex: 'author.username',
    formIndex: 'authorId',
    inputType: 'text',
    readonly: true
  }
]

// 评论编辑功能
const commentColumns = [
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content'
  }, {
    title: '作者',
    dataIndex: 'authorName',
    key: 'authorName'
  }, {
    title: '时间',
    dataIndex: 'createdTime',
    key: 'createdTime'
  }, {
    title: '操作',
    key: 'action'
  }
]
</script>

<template>
  <the-common-table :service="issueService"
                    editing-value-key-name="id"
                    :columns="columns"
                    :editing-form="editingForm"
                    :modal-width="1000"
                    @onRefresh="onTableRefresh">
    <template #custom-edit="{detailObj}">
      <a-table :columns="commentColumns" :data-source="detailObj.comments">
        <template #bodyCell="{column, record}">
          <!--操作-->
          <template v-if="column.key==='action'">
            <a-space size="small">
              <a-button type="primary">编辑</a-button>
              <a-popconfirm
                  title="删除后不可回复，确定删除？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="">
                <a-button type="danger">
                  删除
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </template>
  </the-common-table>
</template>

<style scoped>

</style>